$(function() {

    var size = $('#ul li').length
    console.log(size)
    function app() {
        for(var i = 0; i < size; i++) {
            var li = "<li>" + "</li>"
            $('#ol').append(li)
        }
    }

    app()

    $('#ol li').eq(0).addClass('current')

    $('#ol li').click(function() {
        var index = $(this).index() - 1
        $(this).addClass('current').siblings().removeClass('current')
        $('#ul li').eq(index).stop().fadeIn().siblings().stop().fadeOut()
        console.log(index)
    })


    var i = 0
    function moveR() {
        i++
        if(i == size) {i = 0}
        $('#ul li').eq(i).stop().fadeIn().siblings().stop().fadeOut()
        $('#ol li').eq(i).addClass('current').siblings().removeClass('current')
    }
    function moveL() {
        i--
        if(i == -1) {i = size - 1}
        $('#ul li').eq(i).stop().fadeIn().siblings().stop().fadeOut()
        $('#ol li').eq(i).addClass('current').siblings().removeClass('current')
    }
    var t = setInterval(moveR, 3000)
    $('.screen').hover(function() {
        clearInterval(t)
    }, function() {
        t = setInterval(moveR, 3000)
    })
    $('#arr').hover(function() {
        clearInterval(t)
    }, function() {
        t = setInterval(moveR, 3000)
    })
    $('#right').click(function() {
        moveR()
    })
    $('#left').click(function() {
        moveL()
    })
})